/**
 * Text module
 */


import React from 'react';

class Text extends React.Component {
    componentDidMount() {
        this.initElements();
    }
    updateWidgetByText(text) {
        // 更新文本
    }
    initElements() {
        // const widget = this.props.widget;
        // const isPreview = this.props.preview;
        // const prefix = isPreview ? 'preview-wgt-id-' : 'wgt-id-';
        // this.elements = {
        //     widget: $(`#${prefix}${widget.id}`),
        //     editableText: $(this.refs.editableText),
        // };
    }
    resetWidgetDimensionsByText() {
        const widget = this.props.widget;
        const root = this.props.root;
        const editableEl = this.elements.editableText;
        let oldW = widget.width,
            oldH = widget.height,
            oldX = widget.offset_x,
            oldY = widget.offset_y,
            w = editableEl.width(),
            h = editableEl.height();
        if (this.textEdit) {
            widget.width = w;
            widget.height = h;
            widget.offset_x = oldX + (w - oldW) / 2;
            widget.offset_y = oldY - (h - oldH) / 2;
        }
        root.updateSelectedWidget(widget);
    }
    reBuildText() { // 替换换行符为<br>标签
        // const { widget } = this.props;
        // let text = '';
        // if (!widget.text) return text;
        // for (let i = 0; i < widget.text.length; i++) {
        //     text += widget.text[i].replace('\n', '<br/>');
        // }
        // return text;
    }
    render() {
        const widget = this.props.widget;
        const pStyle = {
            width: '100%',
            height: '100%',
            fontSize: '12px',
        };

        const cStyle = {
            position: (this.textEdit ? 'absolute' : 'relative'),
            textAlign: 'left',
            wordBreak: 'break-all',
            fontSize: `12px`,
            padding: '0 5px',
        };
        const text = this.reBuildText();
        return (
          <div style={pStyle}>
            <div className={`widget-text ${this.textEdit ? ' widget-text-inedit ' : ' prevent-interaction '}`}>
              <div ref="editableText" className="widget-text-editable" style={cStyle} dangerouslySetInnerHTML={{ __html: text }} />
            </div>
          </div>
        );
    }
}

// Text.propTypes = {
//   type: React.PropTypes.string
// };
Text.defaultProps = {
    name: "text",
    type: 10,
    color: "FFFFFF",
    type_display: $._("Text"),
    icon_class: "icon-text",
    width: 180,
    height: 20,
    t_font_family: "黑体",
    t_font_size: 12,
    text: ""
};
export default Text;
